<template>
  <avue-crud
    v-model:search="formData"
    :option="option"
    :table-loading="loading"
    :data="tableData"
    @search-change="getList"
    @search-reset="getList"
    @refresh-change="getList"
    ref="crud"
  >
    <template #menu-left>
      <el-button
        type="primary"
        icon="plus"
        @click="handleOpenMenuDialog"
        >新增</el-button
      >
      <el-button
        type="primary"
        icon="refresh"
        :loading="refreshLoading"
        @click="handleRefreshCache"
        >刷新缓存</el-button
      >
    </template>
    <template #status="{ row }">
      <el-tag type="primary" v-if="row.name">启用</el-tag>
      <el-tag type="info" v-else>停用</el-tag>
    </template>
    <template #iconCss="{ row }">
      <el-icon size="18">
        <component :is="row.iconCss"></component>
      </el-icon>
    </template>
    <template #menuType="{ row }">
      <el-tag type="primary">{{
        row.menuType == 'folder'
          ? '目录'
          : row.menuType == 'menu'
          ? '菜单'
          : row.menuType == 'comp'
          ? '组件'
          : '按钮'
      }}</el-tag>
    </template>
    <template #menu="{ row }">
      <el-button
        link
        icon="el-icon-edit"
        @click="handleEdit(row)"
        type="primary"
        >编辑
      </el-button>
      <el-button
        v-if="row.menuType != 'button'"
        link
        icon="el-icon-plus"
        type="primary"
        @click="handleAddSon(row)"
        >新增子项
      </el-button>
      <el-popconfirm
        title="确认删除该条数据?"
        confirm-button-text="确认"
        cancel-button-text="取消"
        @confirm="handleDel(row)"
        width="180"
      >
        <template #reference>
          <el-button
            link
            type="danger"
            icon="el-icon-delete"
            :loading="row.loading"
            >删除
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </avue-crud>
  <MenuDialog
    v-model="visible"
    :dialogType="dialogType"
    :editData="curRow"
    :submitSuccess="submitSuccess"
  ></MenuDialog>
</template>

<script setup>
import {
  apiGetList,
  apiDel,
  apiRefreshCache,
} from '@/apis/system/menuManage.js'
import { reactive } from 'vue'
import { cloneDeep } from 'lodash'
import MenuDialog from './components/MenuDialog.vue'
import { ElMessage } from 'element-plus'

const useTable = () => {
  const option = {
    height: 'auto',
    searchShow: true,
    delBtn: false,
    editBtn: false,
    addBtn: false,
    menuWidth: 250,
    selection: false,
    column: [
      {
        label: '菜单名称',
        prop: 'name',
        search: true,
        span: 24,
        width: '200',
      },

      {
        label: '图标',
        prop: 'iconCss',
        span: 24,
        width: '70',
      },

      {
        label: '菜单编码',
        prop: 'code',
        search: true,
        span: 24,
        width: '200',
      },
      {
        label: '排序',
        prop: 'orderNum',
        span: 24,
        width: '60',
      },
      {
        label: '菜单类型',
        prop: 'menuType',
        span: 24,
        width: '90',
      },
      {
        label: '路由地址',
        prop: 'route',
        minWidth: '150',
        overHidden: true,
        span: 24,
      },
      {
        label: '组件路径',
        prop: 'compUrl',
        minWidth: '150',
        overHidden: true,
        span: 24,
      },
      {
        label: '状态',
        prop: 'status',
        span: 24,
        width: '80',
      },
    ],
  }
  const loading = ref(false)
  const formData = reactive({})
  const tableData = ref([])
  const getList = async (params, done) => {
    const resData = await apiGetList(formData.value, loading)
    tableData.value = resData.data
    done && done()
  }
  getList()
  return { option, loading, formData, tableData, getList }
}

// 弹窗数据
const useDialog = () => {
  const visible = ref(false)
  const dialogType = ref('add')
  const handleOpenMenuDialog = () => {
    visible.value = true
    dialogType.value = 'add'
  }
  return { handleOpenMenuDialog, visible, dialogType }
}
const { visible, dialogType, handleOpenMenuDialog } = useDialog()
const { option, loading, formData, tableData, getList } = useTable()

const submitSuccess = () => {
  visible.value = false
  getList()
}
// 删除按钮
const handleDel = (row) => {
  row.loading = true
  apiDel(row.id)
    .then(() => {
      ElMessage.success('删除成功！')
      getList()
    })
    .finally(() => {
      row.loading = false
    })
}

const curRow = ref({})
const handleEdit = (row) => {
  dialogType.value = 'edit'
  curRow.value = cloneDeep(row)
  visible.value = true
}



// 新增子项
const handleAddSon = (row) => {
  dialogType.value = 'addSon'
  curRow.value = {
    menuType: row.menuType === 'folder' ? 'menu' : 'button',
    parentId: row.id,
  }
  visible.value = true
}

const refreshLoading = ref(false)
// 刷新缓存
const handleRefreshCache = async () => {
  await apiRefreshCache(refreshLoading)
  ElMessage.success('刷新成功！')
}
</script>

<style lang="scss" scoped></style>
